    
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const PurifyCSSPlugin = require("purifycss-webpack");

// webpack4.1.0，不再支持 extract-text-webpack-plugin。
// 解决办法：使用 4.0 beta 版，npm install --save-dev extract-text-webpack-plugin@next
const extractTextPlugin = require("extract-text-webpack-plugin");
console.log( encodeURIComponent(process.env.type) );
if(process.env.type== "build"){
    // console.log(process.env.type)
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}else{
    var website={
        publicPath:"http://192.168.0.104:1717/"
    }
}

module.exports={
    //入口文件的配置项
    entry:{
        entry: './src/entery.js',
    },
    //出口文件的配置项
    output:{
        //打包的路径文职
        path:path.resolve(__dirname,'dist'),
        //打包的文件名称
        filename:'[name].js',
        publicPath: website.publicPath
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({ // css文件的打包和分离
                    fallback: "style-loader",
                    use: [
                        { 
                            loader: 'css-loader', 
                            options: { 
                                importLoaders: 1 
                            } 
                        },
                        'postcss-loader' // 让postCSS拥有添加前缀的能力
                    ]
                })
            },{
                test: /\.(png|jpg|gif)/, // 是匹配图片文件后缀名称。
                use: [{  // 是指定使用的loader和loader的配置参数。
                    loader: 'url-loader',
                    options: {
                        limit: 500000, // 是把小于500000B的文件打成Base64的格式，写入JS
                        outputPath: 'images/' // 把打包后的图片放到images文件夹下
                    }
                }]
            },{
                test: /\.(htm|html)$/i,
                 use:[ 'html-withimg-loader'] 
            },{
                test: /\.less$/,
                use: extractTextPlugin.extract({ // Less文件的打包和分离
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },{
                test: /\.scss$/,
                use: extractTextPlugin.extract({ // scss文件的打包和分离
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },{ // es6转es5
                test:/\.(jsx|js)$/,
                use:{
                    loader:'babel-loader',
                },
                exclude:/node_modules/
            }

        ]
    },
    //插件，用于生产模版和各项功能
    plugins:[
        // 实现JS代码的压缩
        // new uglify(),
        // 将html文件打包到dist目录下
        new htmlPlugin({
            // 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号
            minify:{
                removeAttributeQuotes:true
            },
            // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS
            hash:true,
            // 是要打包的html模版路径和文件名称
            template:'./src/index.html'
           
        }),
        // CSS分离
        new extractTextPlugin("/css/index.css"),
        // 消除未使用的CSS
        new PurifyCSSPlugin({ 
            // Give paths to parse for rules. These should be absolute!
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
        }),
        // 全局引入第三方类库
        new webpack.ProvidePlugin({
            $:"jquery"
        }),
        // 在JS中加上版权或开发者声明
        new webpack.BannerPlugin('JSPang版权所有')
    ],
    // 打包后如何调试
    devtool: 'eval-source-map',
    //配置webpack开发服务功能
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    },
    // watchOptions:{
    //     //检测修改的时间，以毫秒为单位
    //     poll:1000, 
    //     //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    //     aggregateTimeout:500, 
    //     //不监听的目录
    //     ignored:/node_modules/, 
    // }
}